<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架，让你的网站更快更炫更好用">
        <meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
        <meta name="author" content="RubyLouvre,司徒正美">


        <title>avalon中文文档</title>
        <script src="//files.cnblogs.com/files/rubylouvre/avalon.shim.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link href="../../assets/css/patch.css" rel="stylesheet">

        <!-- Documentation extras -->

        <link href="../../assets/css/docs.min.css" rel="stylesheet">
        <style>
            body,html{
               overflow-y: hidden;
            }
        </style>
        <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script>
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
        <![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico">

    </head>
    <body>




        <div class="container bs-docs-container">

            <div class="row">
                <div class="col-md-9" role="main">


<h1 class="page-header">配置</h1>
<p>本章节，主要是介绍<a href="https://github.com/RubyLouvre/avalon">avalon.config</a>方法，通过它来制定一些更贴心的功能。</p>

<p>一般情况下，我们在使用ms-controller绑定时，需要添加一个ms-controller类名，目的是为了防止网速慢时将花括号暴露出来。
</p>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;avalon入门&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;script src="avalon.modern.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script&gt;
        var model = avalon.define({
            $id: "test",
            array: [{
                check: 1
            }, {
                check: 2
            }, {
                check: 3
            }],
            aaa: "999"
        })
    &lt;/script&gt;
    &lt;style&gt;
        .ms-controller {
            visibility: hidden
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test" class="ms-controller"&gt;
        &lt;div ms-repeat="array"&gt;
            {{el.check}}
        &lt;/div&gt;
        &lt;a ms-href="xxxx{{aaa}}.html"&gt;ddd&lt;/a&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>
<div><img src="../../assets/css/configuration/images/config01.png"> </div>
<p>双花括号也默认是python一些著名模板的界定符，为了防止冲突，我们有更换界定符的需求。这时我们可以这样做</p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;avalon入门&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;script src="avalon.modern.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script&gt;
        avalon.config({
            interpolate: ["{&", "&}"]
        })
        var model = avalon.define({
            $id: "test",
            array: [{
                check: 1
            }, {
                check: 2
            }, {
                check: 3
            }],
            aaa: "999"
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test" class="ms-controller"&gt;
        &lt;div ms-repeat="array"&gt;
            {&amp;el.check&amp;}
        &lt;/div&gt;
        &lt;a ms-href="xxxx{&amp;aaa&amp;}.html"&gt;ddd&lt;/a&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>

<p>注意,左右定界符不能一样,不能出现&lt;或&gt;。</p>

<p>我们再看下一个有用的配置项，debug。<a href="https://github.com/RubyLouvre/avalon">avalon</a>默认是在控制台下打印没有调试消息的，上线时我们不愿用户看到它们，可以这样关掉它们。
</p>
<div><img src="../../assets/css/configuration/images/config02.jpg"  /></div>
<div><img src="../../assets/css/configuration/images/config03.jpg" /></div>
<div><img src="../../assets/css/configuration/images/config04.jpg"/></div>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:javascript;gutter:false;toolbar:false'>avalon.config({
    debug: false
})</pre></div>

<p><a href="https://github.com/RubyLouvre/avalon">avalon</a>拥有自己的AMD加载器，如果你想用requirejs或seajs，那你可以使用shim版本或禁用自带的加载器，或像<a href="http://www.html-js.com/article/Avalon-tutorial-1-the-introduction-of-Avalon">第一节</a>建议的那样，直接在源码里面把它整个删掉。详细方式参见<a href="/../../assets/css/engineering/loader.html">这里</a></p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:javascript;gutter:false;toolbar:false'>avalon.config({
    loader: false
})</pre></div>
<p>在1.5.*，VM对V的同步改成了异步，可能对某些拦截器产生影响，如果大家不想修改拦截器，可以通过async开关来关闭此特性！</p>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:javascript;gutter:false;toolbar:false'>avalon.config({
    async: false
})</pre></div>
<p>此外，avalon还有两个隐秘的配置项。</p>
<div class="bs-callout bs-callout-warning">
    <h4>maxRepeatSize</h4>
    <p>maxRepeatSize是用来配置ms-repeat循环绑定生成的代理节点所在的池子大小，目的是重复利用这些VM对象。默认是100。手机上对内存比较严重，可以将此阀值调少点。</p>
    <div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:javascript;gutter:false;toolbar:false'>avalon.config({
    lmaxRepeatSize: 40
})</pre></div>
</div>

<div class="bs-callout bs-callout-danger" >
    <h4>dettachVModels</h4>
    <p>dettachVModels是决定在事件绑定的this对象上添加$vmodels、 $vmodel属性。以前是默认添加的，现在是默认不添加，这是出于CG回收的考虑。并且在IE6-8下，为元素添加$vmodels属性不知为何会抛异常。看源码：
    <div><img src="../../assets/css/configuration/images/config05.jpg" /></div>
    <p>$vmodels、 $vmodel应该鲜为人知，大家不要管它们就是。此配置项也将在1.36中去掉。</p>
</div>


</div>
<div class="col-md-3" role="complementary">

</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/highlight/shCore.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

